<template>
    <div class='container'>
        <div class="title">
            告警统计
        </div>
        <div class="div_box">
            <div class="item">
                <div>告警总数</div>
                <div class="count" style="cursor: pointer;" @click="toDevice"><span><countTo :startVal='0' :endVal='alarmtotal' :duration='3000'></countTo></span></div>
            </div>
            <div class="item">
                <div>今日告警</div>
                <div class="count"><span><countTo :startVal='0' :endVal='todayalarmcount' :duration='3000' style="color: #FEC300;"></countTo></span></div>
            </div>
            <div class="item">
                <div>未处理</div>
                <div class="count count3"><span><countTo :startVal='0' :endVal='untreatedcount' :duration='3000' style="color: #FC5853;"></countTo></span></div>
            </div>
            <div class="item">
                <div>处理中</div>
                <div class="count count3"><span><countTo :startVal='0' :endVal='weicount' :duration='3000' style="color: #00F8D8;"></countTo></span></div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    reqAlarmTotal,
    reqTodayAlarmCount,
    reqHandlingStatusCount
} from "@api/apiDatav.js";
import { mapState } from "vuex";
import countTo from 'vue-count-to';

export default {
    components: {
        countTo
    },
    data() {
        return {
            todayalarmcount: 0,
            alarmtotal: 0,
            untreatedcount: 0,
            weicount: 0
        }
    },
    computed: {
        ...mapState(["user", "datav"]),
    },
    watch: {
        // 当有实时告警，即刻更新最新数据
        'datav.infoSent'(val) {
            // console.log(val);
            this.untreatedcount++;
            this.alarmtotal++;
            this.todayalarmcount++;
        },
        'datav.sum'(val) {
            // console.log(val);
            this.untreatedcount--;
            this.weicount++;
        },
        'datav.end'(val) {
            // console.log(val);
            this.weicount--;
        },
    },
    methods: {
        toDevice() {
            this.$router.replace({ name: 'alarm', params: { orgId: this.datav.orgarr.id ,orgName:this.datav.orgarr.orgName} });
        },
        // 告警总数
        async getAlarmTotal() {
            let res = await reqAlarmTotal({
                tenantId: this.user.tenantId,
                orgId: this.datav.orgarr.id,
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.alarmtotal = res.data.count;
        },
        // 
        async getTodayAlarmCount() {
            let res = await reqTodayAlarmCount({
                tenantId: this.user.tenantId,
                orgId: this.datav.orgarr.id,
                type: 2,
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.todayalarmcount = res.data.row.todayCount;
        },
        // 告警处理统计
        async getHandlingStatusCount() {
            let res = await reqHandlingStatusCount({
                tenantId: this.user.tenantId,
                orgId: this.datav.orgarr.id,
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // if (res.data.row.length == 0) {
            //     this.untreatedcount = 0;
            //     this.weicount = 0;
            //     return;
            // }
            this.untreatedcount = 0;
            this.weicount = 0;
            res.data.row.forEach(item => {
                if (item.status == '1') {
                    this.untreatedcount = item.count;
                } else if (item.status == '2') {
                    this.weicount = item.count;
                }
            })
        }
    },
    created() {

    },
    mounted() {
        // this.getAlarmTotal()
        // this.getTodayAlarmCount()
        // this.getHandlingStatusCount()
    }
}
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;
    display: inline-block;
    .fontSize(16);

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600
    }

    .div_box {
        height: 64%;
        .fontSize(13);
        color: #ccc;
        display: flex;
        padding: 5% 2% 0 2%;
        box-sizing: border-box;

        .item {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            >div:first-of-type {
                color: #8EA4E9;
            }

            .count {
                // color: #8777FF;
                .marginTop(20);

                span {
                    .fontSize(22);
                    color: #03E3EE;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>